<template>
  <div class="hello">
    <MyDraggable></MyDraggable>
    <PropSync :author.sync="author"></PropSync>
    <p>author: {{author.name}} = {{author.age}}</p>
    <native-event @click.native="handleClick"></native-event>
    <native-event @click="handleClick"></native-event>
    <p>checkedStatus: {{checkedStatus}}</p>
    <input v-model="citys">
    <add-on-1 :author="author" :initCounter="searchText" :city="citys" v-model="lovingVue" @change="checkedChange"></add-on-1>
    <ul>
      <li is="add-on-2"></li>
      <li is="add-on-3"></li>
    </ul>

    <div class="tabs-switch">
      <component :is="currComponent"></component>
      <tab-list v-on:parentHandle="handleSwitch"></tab-list>
    </div>

    <div class="slot-box">
      <alert-slot>
        this is a slot-box,插槽。
      </alert-slot>
    </div>

    <div :style="{fontSize: postFontSize + 'em'}">
      searchText  : {{searchText}}
      <BlogPost
        v-model="searchText"
        v-for="post in posts"
        :key="post.id"
        :post="post"
        @enlarge-text="onEnlargeText"
      ></BlogPost>
    </div>
    <p>
      内联处理器中的方法
      <button @click.once="doThis">Sunmit</button>
    </p>
    <input type="text" v-model="message">
    <div>过滤排序显示：
      <ul>
        <li v-for="number in memberNumbers">{{number}}</li>
      </ul>
      <ul>
        <li v-for="number in even(numbers)">{{number}}</li>
      </ul>
    </div>
    <p>过滤排序显示 - 2：{{memberNumbers}}</p>
    <p>userProfile - name: {{userProfile.name}}</p>
    <p>userProfile - age: {{userProfile.age}}</p>
    <p>description: {{description}}</p>
    <input type="text" v-model="fullName">
    <p>fullName:{{fullName}}</p>
    <span v-bind:class="styleObj">This is style</span>
    <button-counter :message="msg" :desc="desc"  v-bind:weapons="weapons" v-bind:animal="animal" v-bind="post" v-bind:userlist="users" v-bind:book="book.name +'by'+ book.author"></button-counter>
  </div>
</template>

<script>
import ButtonCounter from "./button-counter";
import BlogPost from "./blog-post";
import MyDraggable from "./my-draggable";
import AlertSlot from "./alert-slot";
import TabList from "./dynamic_components/tab-list";
import addOn1 from "./dynamic_components/add-on-1";
import addOn2 from "./dynamic_components/add-on-2";
import addOn3 from "./dynamic_components/add-on-3";
import NativeEvent from "./native-event";
import PropSync from "./prop_sync";
export default {
  name: 'HelloWorld',
  components: {
    ButtonCounter,
    BlogPost,
    MyDraggable,
    AlertSlot,
    TabList,
    addOn1,
    addOn2,
    addOn3,
    NativeEvent,
    PropSync
  },
  data () {
    return {
      checkedStatus: true,
      lovingVue: true,
      citys: '',
      author: {
        id: 12,
        name: '张三',
        age: 34
      },
      currComponent:'addOn1',
      searchText:'',
      postFontSize: 1,
      posts: [
        { id: 1, title: 'My journey with Vue',content:'<p style="color:red;">this is a content 1<p>' },
        { id: 2, title: 'Blogging with Vue',content:'<p style="color:red;">this is a content 2<p>' },
        { id: 3, title: 'Why Vue is so fun',content:'<p style="color:red;">this is a content 3<p>' }
      ],
      numbers:[1,2,3,4,5],
      userProfile: {
        name: 'Jeff'
      },
      fullName: 'Michael Jordan',
      firstName: 'Michael',
      lastName: 'Jordan',
      description: '',
      styleObj:{
        active: true,
        error: false
      },
      message: '',
      msg: 'Welcome to Your Vue.js App!!!',
      desc: 'This is a DESCRIPTION!@',
      book: {
        name: '《三国演义》',
        author: '罗贯中'
      },
      users: [
        {name: '张三',age: 20, gender: '女'},
        {name: '赵四',age: 45},
        {name: '郝建国',age: 50}
        ],
      post: {
        id: 610423,
        title: 'AK47'
      },
      animal: {
        name: '蚂蚱',
        category: '昆虫'
      },
      weapons: ['AK47','M16','B2隐身战斗机']
    }
  },
  methods:{
    handleClick: function () {
      alert('原生事件点击按钮')
    },
    checkedChange: function(v){
      this.checkedStatus = v;
    },
    handleSwitch: function(v){
      switch (v){
        case 1:
          this.currComponent = 'addOn1';
              break;
        case 2:
          this.currComponent = 'addOn2';
          break;
        case 3:
          this.currComponent = 'addOn3';
          break;
      }
    },
    onEnlargeText:function(enlargeAmount){
        console.log("enlargeAmount", enlargeAmount)
        this.postFontSize += enlargeAmount;
    },
    doThis:function(){
      console.log('doThis')
    },
    warn: function(msg, event){
      console.log('event',event)
      console.log('msg',msg)
    },
    even: function () {
      return this.numbers.filter(function (number) {
        return number % 2 != 0
      })
    }
  },
  mounted(){
    this.userProfile = Object.assign({}, this.userProfile, {
      age: 27
    })
  },
  watch: {
    message: function (newValue, oldValue) {
      this.description = newValue
      this.isActive = true
      console.table({'newValue':newValue, 'oldValue':oldValue})
    }
  },
  computed: {
    memberNumbers() {
     return this.numbers.filter(function (number) {
        return number % 2 == 0;
      })
    },
    fullName: {
      get: function(){
        console.log('arr---')
        return this.firstName + this.lastName
      },
      set: function(val){
        let arr = val.split(' ')
        console.log('arr', arr)
        this.firstName = arr[0]
        this.lastName = arr[arr.length - 1]
      }
    },
    styleObj: function () {
      // return {
      //   active:
      // }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .active{color:red;}
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
